<template>
    <div class="login-wrap" :style="{height: windowHeight+'px'}">
        <div class="ms-login">
            <div class="ms-title">
                <div class="title">{{change?'登录网络大屏系统':'注册网络大屏系统'}}</div>
                <div class="guide"  @click="helpVisible=true;">操作指南</div> 
                <div class="button"  @click="changeForm(false)" v-if="change">立即注册</div> 
                <div class="button"  @click="changeForm(true)" v-if="!change">立即登录</div> 
            </div>
            <el-form :model="param" :rules="rules" ref="login" label-width="80px" class="ms-content" v-if="change">
                 <el-form-item prop="username" label="账号" required>
                    <el-input v-model="param.username" placeholder="请输入账号">
                        <el-button slot="prepend" icon="el-icon-user"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码" required>
                    <el-input show-password placeholder="请输入密码" v-model="param.password"  >
                        <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                </el-form-item>                
              
                <div class="login-btn">
                    <div class="button forget_password" @click="forgotPass()">忘记密码</div>
                    <el-button type="primary" @click="submitForm(0)">立即登录</el-button>
                </div>
            </el-form>
            <el-form :model="param" :rules="rules" ref="login" label-width="120px" class="ms-content" v-if="!change">
                <div class="showapi">
                    <div style="margin-right:20px">
                        网络大屏系统是基于华为云管理网络提供的开放数据构建的应用，注册本系统可以选择使用华为云管理网络的开放API账号和密码，以简化流程
                        <!-- 请仔细填写关联的账号，具体操作请看账号指引 -->
                    </div>
                    <el-button type="primary" @click="apiVisible = true">api账号指引</el-button>
                </div>

                <el-radio v-model="param.switchAP" label="1">简化注册流程，使用华为云管理网络的开放API账号与密码</el-radio>
                <el-radio v-model="param.switchAP" label="2">标准注册流程，新生成一个账号</el-radio>
                <el-form-item v-if="param.switchAP == '1'" prop="apiUsername" label="云管理API账号" required>
                    <el-input placeholder="请输入云管理API账号" v-model="param.apiUsername">
                        <el-button slot="prepend" icon="el-icon-s-custom"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="param.switchAP == '1'" prop="apiPassword" label="云管理API密码" required>
                    <el-input placeholder="请输入云管理API密码" v-model="param.apiPassword" show-password >
                        <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="param.switchAP == '1'" label="云管理API地址" required>
                    <el-select v-model="param.apiAddress" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <span style="color:#fff">.huaweicloud.com</span>
                </el-form-item>

                <el-form-item v-if="param.switchAP == '2'" prop="username" label="账号" required>
                    <el-input v-model="param.username" placeholder="请输入账号">
                        <el-button slot="prepend" icon="el-icon-user"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="param.switchAP == '2'" prop="password" label="密码" required>
                    <el-input show-password placeholder="请输入密码" v-model="param.password"  >
                        <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="param.switchAP == '2'" prop="checkPass" label="确认密码" required>
                    <el-input show-password placeholder="请确认密码" v-model="param.checkPass"  >
                        <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-tips" v-if="param.switchAP == '1'">虽然注册时使用云管理的账号与密码，但大屏系统和云管理网络的API账号是独立的，您可以在登录后，前往“后台管理”->“用户信息”中修改密码。</div>
                <div class="login-tips" v-if="param.switchAP == '2'">您可以在登录后，前往“后台管理”->“关联华为云管理账号”，配置云管理网络的API账号信息。</div>

                <el-checkbox class="login-tips" v-model="checked"></el-checkbox><span style="color:#fff;margin-left: 5px;">已经阅读并同意</span><span style="color:#69b2ff;cursor:pointer;" @click="showWord()">大屏服务用户协议与隐私声明</span>

                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">立即注册</el-button>
                </div>
                
            </el-form>
        </div>

       
        <el-dialog
            title="账号指引"
            :visible.sync="apiVisible"
            append-to-body>
            <img style="width: 100%;" src="https://cloudcampusapps.top/large_screen/img/guide.jpg" alt="">
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="apiVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="大屏服务用户协议与隐私声明"
            :visible.sync="wordVisible"
            width="800px"
            top="10vh">
            <p>本网站（cloudcampusapps.top)提供的大屏服务是基于华为云管理网络的开放API，把用户网络的数据展现在大屏上。</p>
            <p>是否使用本网站提供的大屏服务，完全出于您的自愿，使用本服务，表明您已经充分理解并同意本协议的所有条款。否则，请勿使用。</p>
            <p>
                一，账户注册<br/>
                1.1 本网站注册要求账号、密码和邮箱为必填项；其中邮箱必填是为了找回密码使用。其他信息都是非必填项。<br/>
                1.2 为了能够访问用户的华为云管理网络的数据，需要用户提供华为云管理平台的api访问账号和密码。<br/>
                1.3 本网站承诺保护用户的所有注册/登记/用户网络的数据，不提供给任何第三方。例外，本网站为了和华为云管理平台通信会使用用户提供的api账号，为了保证通信的正确性，可能会提供用户数据用于定位问题。或者用户要求提供。<br/>
            </p>
            <p>
               二，用户网络数据<br/>
                2.1 本大屏服务展示的所有网络数据，都是使用用户提供的云管理平台的api账号，从华为云管理网络服务中获取的。<br/>
                2.2 本网站承诺，不会修改任何用户网络的配置，除非用户要求。<br/>
                2.3 本网站承诺，不会把用户网络的任何数据提供给任何第三方，除非用户要求。<br/>
                2.4 本网站为了提升服务质量和定位问题，可能会和华为云管理网络平台分享部分用户数据。<br/>
            </p>
            <p>
               三，免责声明<br/>
                3.1 因不可抗力导致的本服务出现任何意外，本网站不承担责任。<br/>
                3.2 对黑客行为、计算机病毒、或因用户原因导致的账号密码泄露，从而引发的任何后果，本网站不承担责任。<br/>
                3.3 本网站免费提供的服务，不保证服务一定能满足您的要求，不保证服务并不会中断，也不保证服务的及时性、安全性和准确性。<br/>
                3.4 本大屏服务仅读取网络数据并展示，不对网络做任何的配置；用户网络出现不可用等任何意外，与本服务理论上不存在任何关系；本服务没有责任联合定位网络不可用等网络问题。<br/>
            </p>
            <p>
               四，用户责任<br/>
                4.1 用户保证提供的注册数据/使用过程的任何行为全部符合国家法律法规的要求，保证未侵犯任何第三方的合法权益；否则因此导致的任何后果，由用户承担。<br/>
            </p><p>
               五，服务的变更、中断与终止<br/>
                5.1 如因升级/维护等原因需要暂停大屏服务、或调整服务内容，我们将尽可能在网站上进行通告。我们不承担任何责任。<br/>
                5.2 对于免费服务，我们可以随时终止服务；用户也可以随时选择取消服务。服务终止后，用户数据将在3个月内被彻底销毁。我们不承担任何责任。<br/>
                5.3 对于有偿服务，我们将根据协议履行相关责任。
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="wordVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="loginVisible"
            width="30%"
            >
            <span>检测到当前账号正处于登录状态，继续登录将导致之前的登录信息失效，请选择是否继续登录</span>

            <span slot="footer" class="dialog-footer">
                <el-button @click="loginVisible = false">不再登录</el-button>
                <el-button type="primary" @click="submitForm(1)">继续登录</el-button>
            </span>
        </el-dialog>


        <el-dialog
            title="系统正在第一次准备数据，可能需要一分钟，请耐心等待"
            :visible.sync="loadingVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            width="800px"
            center>
            <el-image
                style="width: 100%"
                :src="loadingImg"
            ></el-image>

           
        </el-dialog>


        <el-dialog
            title="操作指南"
            :visible.sync="helpVisible"
            width="1000px"
             append-to-body
            >
             <!-- <img style="width: 100%;" :src="helpList[0].img" alt=""> -->
            <el-carousel indicator-position="outside" :autoplay="false" height="540px">
                <el-carousel-item v-for="(item,index) in helpList" :key="index">
                    <img style="width: 100%;" :src="item.img" alt="">
                </el-carousel-item>
            </el-carousel>
        </el-dialog>
    </div>
</template>

<script>
import { showLoading, hideLoading } from '../utils/loading';
export default {
    data: function() {
        var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.param.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        return {
            windowHeight: document.documentElement.clientHeight,
            change: true,
            apiVisible: false,
            options: [{
                value: 'naas'
            }, {
                value: 'naas1'
            }, {
                value: 'naas2'
            }, {
                value: 'naas3'
            }],
            wordVisible: false,
            token: '',
            checked: true,
            // form: {
            //     username: '',
            //     password: '',
            //     address: ''
            // },
            param: {
                username: '',
                password: '',
                checkPass: '',
                telephone: '',
                address: '',
                email: '',
                
                switchAP: '1',  // 1简化流程   2标准流程
                apiUsername: '',
                apiPassword: '',
                apiAddress: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                checkPass: [{ validator: validatePass, trigger: 'blur' }],
                email: [{ required: true,message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
                apiUsername: [{ required: true, message: '请输入云管理API用户名', trigger: 'blur' }],
                apiPassword: [{ required: true, message: '请输入云管理API密码', trigger: 'blur' }],
            },

            loginVisible: false,

            loading: null,
            loadingVisible: false,
            loadingImg: require('../assets/loading.gif'),

            helpVisible: false,
            helpList: [
            {img:"https://cloudcampusapps.top/large_screen/help/1.jpg"},
            {img:"https://cloudcampusapps.top/large_screen/help/2.jpg"},
            {img:"https://cloudcampusapps.top/large_screen/help/3.jpg"},
            {img:"https://cloudcampusapps.top/large_screen/help/4.jpg"},
            {img:"https://cloudcampusapps.top/large_screen/help/5.jpg"},
            {img:"https://cloudcampusapps.top/large_screen/help/6.jpg"},
            {img:"https://cloudcampusapps.top/large_screen/help/7.jpg"}
          ]
        };
    },
    methods: {
        changeForm(state) {
            this.change = state;
            this.checked = state;
        },
        submitForm(i) {
            console.log(this.change)
            this.$refs.login.validate(valid => {
                if (valid && this.checked) {
                    this.submit(i);
                } else {
                    this.$message.error('请检查输入条件并检查是否勾选阅读项目');
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        submit(i) {
            if(this.change) {
               this.login(i);
            } else {
                if(this.param.switchAP == '1'){  //注册简化流程
                console.log('111')
                this.loadingVisible = true

                this.simplify()

                    // this.loading = this.$loading({
                    //     lock: true,
                    //     text: '简化注册时后台需要配置大量数据，还请稍等',
                    //     spinner: 'el-icon-loading',
                    //     background: 'rgba(0, 0, 0, 0.9)'
                    // });
                    // setTimeout(() => {
                    //     this.loading.close();
                    // }, 30000);
                    // 先校验api账号密码，在注册，最后注册好的跟校验好的相关联
                }
                if(this.param.switchAP == '2'){  //注册标准流程
                    showLoading();
                    this.registered()//注册功能单独
                }
            }
            console.log('params',this.param)

        },
        login(i) {   //登录专用 
            let that = this;
            let params = {};
            let url = '';
            if(i==0){
                params = {
                    account: this.param.username,
                    password: this.param.password
                }
            }
            if(i==1) {
                params = {
                    account: this.param.username,
                    password: this.param.password,
                    "isLogin": true,
                    // 强制登录参数
                }
            }
            url = '/signin/userInfo/auth?serviceId=1';
            const headers = {
                 'Content-Type': 'application/json;charset=UTF-8',
            };

            this.$axios.post(url, params, {headers}).then((res) => {
                if(res.data.code == 200){
                    if(res.data.data.Token&&!res.data.data.errorCode) {
                        this.$message.success(res.data.msg);
                        localStorage.setItem('cloud-Auth-Token', res.data.data.Token);
                        window.location.href = "https://cloudcampusapps.top/bs/index.html?token="+res.data.data.Token;
                    }else {
                        this.$message.error(res.data.data.errorCode);
                        this.loginVisible = true;
                    }
                }else{
                    this.$message.error(res.data.msg);
                };
            }).catch((error) => {
                console.warn(error);
            });
        },
        registered() {   //标准注册专用  
            let that = this;
            let params = {};
            let url = '';
            params =  {
                "id": "",
                "password": this.param.password,
                "telephone": this.param.telephone,
                "userExtend": {
                    "address": this.param.address,
                    "email": this.param.email,
                    "id": "",
                    "occupation": "",
                    "sendAllow": true,
                    "userId": ""
                },
                "username": this.param.username
            }
            url = '/signin/userInfo/register?serviceId=1';
            const headers = {
                 'Content-Type': 'application/json;charset=UTF-8',
            };

            this.$axios.post(url, params, {headers}).then((res) => {
                if(res.data.code == 200){
                //注册
                    this.token = res.data.data.Token;
                    this.$message.success(res.data.msg);
                    localStorage.setItem('cloud-Auth-Token', res.data.data.Token);
                    window.location.href = "https://cloudcampusapps.top/bs/index.html?token="+res.data.data.Token;
                    hideLoading();
                }else{
                    this.$message.error(res.data.msg);
                    hideLoading();
                };
            }).catch((error) => {
                console.warn(error);
            });

        },

        simplify() {   //简化注册专用  
            let that = this;
            let params = {};
            let url = '';
            params =  {
                "apiUsername": this.param.apiUsername,
                "apiPassword": this.param.apiPassword,
                "apiAddress": this.param.apiAddress
            }
            url = '/signin/userInfo/simplifyRegister?serviceId=1';
            const headers = {
                 'Content-Type': 'application/json;charset=UTF-8',
            };

            this.$axios.post(url, params, {headers}).then((res) => {
                if(res.data.code == 200){
                    if(res.data.data.errorMsg){
                        this.$message.error(res.data.data.errorMsg);
                        this.loadingVisible = false;
                    } else {
                        //注册
                        setTimeout(() => {
                            this.loadingVisible = false;
                            this.token = res.data.data.Token;
                            this.$message.success('注册成功');
                            localStorage.setItem('cloud-Auth-Token', res.data.data.Token);
                            window.location.href = "https://cloudcampusapps.top/bs/index.html?token="+res.data.data.Token;
                        }, 6000);
                    }
                }else{
                    this.loadingVisible = false;
                    this.$message.error(res.data.msg);
                };
            }).catch((error) => {
                console.warn(error);
            });

        },
        // associate() {
        //     console.log(this.param)
        //     if(!(this.param.apiUsername && this.param.apiPassword && this.param.apiAddress)){
        //         this.$message.error('请验证输入信息');
        //     } else {
        //         this.checkAPI();
        //     }
        // },
     
        showWord() {
            this.wordVisible = true;
        },
        forgotPass() { 
            let that = this;
            let params = {
                username: this.param.username,
            };
            if(!this.param.username) {
                this.$message.error('请填入正确账号哦');
            } else {
                let url = '/signin/userInfo/retrieve?serviceId=1';
                const headers = {
                    'Content-Type': 'application/json;charset=UTF-8',
                };
                this.$axios.post(url, params, {headers}).then((res) => {
                    if(res.data.code == 200){
                        this.$message.success('请接收邮件之后在专属页面进行密码重置');
                         this.$router.push('/forgot');
                    }else{
                        this.$message.error(res.data.msg);
                    };
                }).catch((error) => {
                    console.warn(error);
                });
            }
        }
    },
};
</script>

<style scoped>
.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.login-wrap {
    position: relative;
    width: 100%;
    background-color: #001254;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    color: #fff;
    border-bottom: 1px solid #ddd;
    position: relative;
}
.ms-title .title {
    text-align: center;
    font-size: 20px;
}
.ms-title .button {
    position: absolute;
    font-size: 12px;
    top: 0px;
    right: 20px;
    color: #E6A23C;
    cursor: pointer;
}
.guide {
    position: absolute;
    font-size: 12px;
    top: 0px;
    left: 20px;
    color: #E6A23C;
    cursor: pointer;
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    margin: -280px 0 0 -300px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
    display: flex;
    flex-direction: row-reverse;
    
}
.login-btn .forget_password {
    cursor: pointer;
    line-height: 34px;
    margin-left: 10px;
    color: #fff;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
    margin-left: 80px;
    margin-bottom: 10px;
}
.showapi {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 10px;
    padding: 0 0 0 0;
    box-sizing: border-box;
}
.ms-content /deep/ .el-form-item__label{
    color: #fff;
}
/* .ms-content /deep/ .el-switch__label {
    color: rgb(141, 141, 141);
}
.ms-content /deep/   .el-switch__label.is-active {
    color: #ffc840;
} */

.ms-content /deep/ .el-radio__label {
    color: #fff;
}
.el-radio  {
    margin-bottom: 10px;
}

</style>